<template>
  <div class="view">
    <!--<item>-->
    <!--<div slot="type">动画</div>-->
    <!--<div slot="number">999+</div>-->
    <!--</item>-->
    <item v-for="item in info">
      <template #type>{{ item.name }}</template>
      <template #number>{{ item.number }}</template>
    </item>
  </div>
</template>

<script>
  import Item from "./Item.vue"

  export default {
    name: "Center",
    data() {
      return {
        info: [
          {name:"动画",number:"999+"},
          {name:"音乐",number:"999+"},
          {name:"舞蹈",number:"999+"},
          {name:"知识",number:"999+"},
          {name:"生活",number:"999+"},
          {name:"时尚",number:"999+"},
          {name:"娱乐",number:"999+"},
          {name:"放映厅",number:"208"},
          {name:"国创",number:"270"},
          {name:"游戏",number:"589"},
          {name:"数码",number:"999+"},
          {name:"鬼畜",number:"352"},
          {name:"咨询",number:"271"},
          {name:"影视",number:"999+"},
          {name:"更多",number:"999+"}
        ]
      }
    },
    components: {
      Item
    }
  }
</script>

<style scoped>
  .view {
    display: flex;
    width: 100%;
    flex-flow: row wrap;
  }
</style>